<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">修改密码</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="changePassword-from">
                <!--  <div class="layui-form">-->
                <div class="layui-form-item">
                    <label class="layui-form-label" for="current-password">当前密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="currentPassword" id="current-password" lay-verify="required" autocomplete="off" class="layui-input" onchange="page.check()"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="new-password">新密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" id="new-password" lay-verify="required|pass" autocomplete="off" class="layui-input"/>
                    </div>
                    <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" for="confirm-password">确认新密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="confirmPassword" id="confirm-password" lay-verify="required|confirmPassword" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="button" lay-submit lay-filter="changePassword">确认修改</button>
                    </div>
                </div>
                <!-- </div>-->
            </form>
        </div>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/

    page.check=()=>{
        let currentPassword = $("input[name = 'currentPassword']").val();
        $.get("/user/checkPassword", { password: currentPassword}, function(res){
            if(res.code === 0){
                layer.tips('密码错误！', '#current-password', {
                    //tips: [1, '#0FA6D8'] //还可配置颜色
                    tips: [1, '#d84721'] //还可配置颜色
                });
                page.current =false;
            }else {
                page.current = true;
            }
        });
    };

    layui.use(['form'], function () {
        let form = layui.form;

        //自定义验证规则
        form.verify({
            confirmPassword: function(value){
                let data = form.val("changePassword-from");
                if(value !== data.password){
                    return '两次密码不一致！';
                }
            },
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        //监听提交
        form.on('submit(changePassword)', function (data) {
            $.ajax({
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                url: "/user/savePassword",
                data: {"password":data.field.password},
                beforeSend : function() {
                    if(!page.current){
                        layer.tips('密码错误！', '#current-password', {
                            //tips: [1, '#0FA6D8'] //还可配置颜色
                            tips: [1, '#d84721'] //还可配置颜色
                        });
                        return false;
                    }
                },
                success: function (result) {
                    if (result.code === 1) {
                        layer.msg('修改成功!2秒后重新登录,', {icon: 1, time: 2000},function(){
                            window.location.href='/logout';
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1200});
                    }
                },
                error: function (e) {
                    layer.msg('网络错误', {icon: 2});
                }
            });
        });

    });
    /*]]>*/
</script>